<template>
  <div @click.stop="divClick">
    <el-row v-if="sortedit">
      <el-col :span="16" style="padding:8px 0;text-align:center">
        <el-input v-model="sortdata[sortkey]" type="number" size="small" placeholder=""/>
      </el-col>
      <el-col :span="8">
        <div>
          <el-button size="small" style="padding:5px;" type="primary" plain="" circle icon="el-icon-check" @click.stop="sortEditSave()"/>
        </div>
        <div>
          <el-button size="small" type="primary" plain="" circle icon="el-icon-close" @click.stop="sortEditCancel()"/>
        </div>
      </el-col>
    </el-row>
    <el-button v-else size="small" type="text" @click.native.stop="showSortEdit">{{ row[sortkey] }}</el-button>
  </div>
</template>
<script>
export default {
  name: 'SortEdit',
  props: {
    row: {
      require: true,
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      require: true,
      type: Array,
      default() {
        return []
      }
    },
    sortkey: {
      require: false,
      type: String,
      default: 'sort'
    },
    rowkey: {
      require: false,
      type: String,
      default() {
        return 'id'
      }
    }
    // editshow: {
    //   require: false,
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      sortdata: {},
      sortedit: false
    }
  },
  computed: {
    sortShow() {
      return this.editshow
    }
  },
  mounted() {
    // this.sortdata = Object.assign({}, this.row)
  },
  beforeUpdate() {
    // console.log('before update', this.$data)
  },
  updated() {
    // console.log('update', this.$data)
  },
  methods: {
    showSortEdit() {
      console.log(this.row)
      this.sortdata = Object.assign({}, this.row)
      this.sortedit = true

      // this.$emit('sortInput', this.row)
      // this.$emit('update:editshow', true)
    },
    sortEditCancel() {
      this.sortedit = false
      // this.$emit('update:editshow', false)
    },
    sortHide() {
      console.log('sortHide')
      this.sortEditCancel()
    },
    sortEditSave() {
      var sortold = 0
      this.list.forEach(item => {
        if (item[this.rowkey] === this.row[this.rowkey]) {
          sortold = item[this.sortkey]
          if (typeof (item['sortkey']) !== 'number') {
            item[this.sortkey] = parseInt(this.sortdata[this.sortkey])
          } else {
            item[this.sortkey] = this.sortdata[this.sortkey]
          }
          return
        }
      })
      this.sortdata.sortold = sortold
      this.$emit('sortEditSave', this.sortdata)
      this.sortedit = false
      // this.$emit('update:editshow', false)
    },
    divClick() {}
  }
}
</script>
